<template>
	<page-layout class="page">
		<pure-gap size="12px"></pure-gap>

		<view class="pj-padding-sides">
			<!-- 基础使用 -->
			<pj-demo title="基础使用">
				<pure-cell
					title="预约时间"
					:desc="time1 ? time1 : '请选择'"
					showArrow
					@onClick="show1 = true"
				></pure-cell>
				<pure-time-picker
					:show="show1"
					:time="time1"
					@onOk="onOk1"
					@onNot="show1 = false"
					@onClose="show1 = false"
				></pure-time-picker>
			</pj-demo>

			<!-- 两列 -->
			<pj-demo title="两列">
				<pure-cell
					title="预约时间"
					:desc="time2 ? time2 : '请选择'"
					showArrow
					@onClick="show2 = true"
				></pure-cell>
				<pure-time-picker
					:show="show2"
					:time="time2"
					:cols="2"
					@onOk="onOk2"
					@onNot="show2 = false"
					@onClose="show2 = false"
				></pure-time-picker>
			</pj-demo>

			<!-- 一列 -->
			<pj-demo title="一列">
				<pure-cell
					title="预约时间"
					:desc="time3 ? time3 : '请选择'"
					showArrow
					@onClick="show3 = true"
				></pure-cell>
				<pure-time-picker
					:show="show3"
					:time="time3"
					:cols="1"
					@onOk="onOk3"
					@onNot="show3 = false"
					@onClose="show3 = false"
				></pure-time-picker>
			</pj-demo>

			<!-- 格式化显示文本 -->
			<pj-demo title="格式化显示文本">
				<pure-cell
					title="预约时间"
					:desc="time4 ? time4 : '请选择'"
					showArrow
					@onClick="show4 = true"
				></pure-cell>
				<pure-time-picker
					:show="show4"
					:time="time4"
					:formatter="formatter"
					@onOk="onOk4"
					@onNot="show4 = false"
					@onClose="show4 = false"
				></pure-time-picker>
			</pj-demo>
		</view>

		<pure-gap size="12px"></pure-gap>
	</page-layout>
</template>

<script setup>
	import { ref } from "vue";

	const show1 = ref(false);
	const show2 = ref(false);
	const show3 = ref(false);
	const show4 = ref(false);
	const time1 = ref("12:30:56");
	const time2 = ref("12:36");
	const time3 = ref("12");
	const time4 = ref("12:30:56");

	// 选择事件
	function onOk1(timeStr, items) {
		console.log("onOk1", timeStr, items);
		time1.value = timeStr;
		show1.value = false;
	}

	// 选择事件
	function onOk2(timeStr, items) {
		console.log("onOk2", timeStr, items);
		time2.value = timeStr;
		show2.value = false;
	}

	// 选择事件
	function onOk3(timeStr, items) {
		console.log("onOk3", timeStr, items);
		time3.value = timeStr;
		show3.value = false;
	}

	// 选择事件
	function onOk4(timeStr, items) {
		console.log("onOk4", timeStr, items);
		time4.value = timeStr;
		show4.value = false;
	}

	// 格式化显示文本
	function formatter(num, type) {
		if (type === "hour") {
			return `${num}--时`;
		}
		if (type === "minute") {
			return `${num}--分`;
		}
		if (type === "second") {
			return `${num}--秒`;
		}
	}
</script>

<style lang="scss" scoped></style>
